<template>
  <div class="container">
    <div class="top">
      <el-button type="primary" :icon="Plus" link></el-button>
    </div>
    <div class="bottom">
      <ul class="data-source-list-area">
        <li>
          <el-input v-model="formData.name"></el-input>
        </li>
      </ul>
      <el-form
        ref="formRef"
        :model="formData"
        label-width="auto"
        label-position="left"
        :rules="rules"
        style="width: 100%"
      >
        <el-form-item label="请求地址:" prop="url">
          <el-input v-model.trim="formData.url" />
        </el-form-item>
        <el-form-item label="请求类型:" prop="type">
          <el-select v-model="formData.type" placeholder="">
            <el-option label="Get" value="get" />
            <el-option label="post" value="post" />
          </el-select>
        </el-form-item>
        <el-form-item label="请求参数:" prop="sendData">
          <el-input
            v-model.trim="formData.sendData"
            type="textarea"
            :rows="5"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { rules } from "./constants.js";
const formData = ref({});

const formRef = ref(false);
const submit = async () => {
  const validate = await formRef.value.validate().catch((err) => false);
  if (!validate) return false;
};
defineExpose({
  submit,
});
</script>
<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  .bottom {
    display: flex;
  }
}
</style>
